<template>
  <div class="layout" style="height: 100vh;">
    <Layout>
      <!-- 头部 -->
      <Menu mode="horizontal" theme="light" active-name="1">
        <h2 style="text-align: center">MaofU博客登录</h2>
      </Menu>

      <!-- 登录 -->
      <Content
        :style="{ padding: '0 0px' }"
        style="height: 100%; margin-top: 70px"
      >
        <Form
          ref="formInline"
          :model="formInline"
          :rules="ruleInline"
          style="margin-top: 30px"
          :style="{ padding: '0 50px' }"
        >
          <FormItem prop="user">
            <Input type="text" v-model="formInline.user" placeholder="Username">
            </Input>
            <template slot:prepend>
              <Icon type="ios-person-outline"></Icon>
            </template>
          </FormItem>
          <FormItem prop="password" style="margin-top: 40px">
            <Input
              type="password"
              v-model="formInline.password"
              placeholder="Password"
            >
              <template slot:prepend>
                <Icon type="ios-lock-outline"></Icon>
              </template>
            </Input>
          </FormItem>

          <FormItem style="text-align: center; padding-top: 70px">
            <Button
              style="width: 200px"
              type="primary"
              @click="handleSubmit('formInline')"
              >登录</Button
            >
          </FormItem>
        </Form>
      </Content>
      <!-- 尾部 -->
      <Footer class="layout-footer-center">2022 &copy; MaofU</Footer>
    </Layout>
  </div>
</template>

<script>
import { signin } from '@/api/API_sign_in_out'
export default {
  name: 'Login',
  data() {
    return {
      formInline: {
        user: '',
        password: ''
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: '请填写用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请填写密码',
            trigger: 'blur'
          },
          {
            type: 'string',
            min: 4,
            message: '密码长度不能小于4位',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          signin(
            this.formInline.user,
            this.formInline.password,
            ({ data: res }) => {
              if (res.ret != 0) {
                this.$Notice.error({ desc: res.msg })
              } else {
                // 登录成功,跳转主页
                this.$Notice.success({ desc: '登陆成功' })

                this.$router.replace('/')
              }
            }
          )
        } else {
          this.$Notice.error({ desc: '输入不合法!' })
        }
      })
    }
  }
}
</script>

<style scoped>
.ivu-layout {
  border: 1px solid #fcfdff;
  background: #ffffff;
  position: relative;
  border-radius: 4px;
  overflow: hidden;

  width: 100%;
  height: 100%;
}

.layout-footer-center {
  text-align: center;
  margin-top: 180px;
}
</style>
